<template>
  <div class="drag-container">
    <div class="drag-side">
      <div class="mh2">
        <div
          class="mh2-item"
          draggable="true"
          @dragstart="dragstart($event, element)"
          @dragend="dragend"
          v-for="element in myArray"
          :key="element.id"
        >
          {{ element.name }}
        </div>
      </div>
    </div>
    <div class="drag-main">
      <div @drop="drop" @dragover.prevent class="mh1">
        <vue-draggable-resizable
          :enable-native-drag="false"
          :x="element.x || 0"
          :y="element.y || 0"
          :debug="true"
          :ref="`ref_${index}`"
          @dragging="onDrag(index, ...arguments)"
          @resizing="onResize(index, ...arguments)"
          v-for="(element, index) in myArray2"
          :key="index"
          :parent="true"
        >
          <div>
            <p>
              {{ element.name }}
              <br />
              X: {{ element.x }} / Y: {{ element.y }} - Width:
              {{ element.width }} / Height: {{ element.height }}
            </p>
          </div>
        </vue-draggable-resizable>
      </div>
    </div>
  </div>
</template>
<script>
//import draggable from "vuedraggable";

export default {
  components: {
    // draggable
  },
  data() {
    return {
      drag: false,
      myArray: [
        { id: 1, name: "element 1" },
        { id: 2, name: "element 2" },
        { id: 3, name: "element 3" },
        { id: 4, name: "element 4" },
      ],
      myArray2: [],
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      dataTransferData: null,
    };
  },
  methods: {
    dragstart(event, data) {
      console.log("drag", data);
      // event.dataTransfer.setData("item", data);
      this.dataTransferData = data;
    },
    dragend(event) {
      console.log("drag", event);
      /// event.dataTransfer.clearData();
      this.dataTransferData = null;
    },
    drop(event) {
      console.log("drop");
      let data = this.dataTransferData;
      data = { ...this.dataTransferData, x: event.offsetX, y: event.offsetY };
      console.log("data: ", data, event);

      const index = this.myArray2.length

      this.myArray2.push(data);

      this.$nextTick(()=> {
        console.log(this.$refs, index, 'nexttick.......')
      })
    },
    onResize(index, x, y, width, height) {
      this.myArray2.splice(index, 1, {
        ...this.myArray2[index],
        x,
        y,
        width,
        height,
      });
    },
    onDrag(index, x, y) {
      console.log(x, y, index, "on drag.......");
      this.myArray2.splice(index, 1, { ...this.myArray2[index], x, y });
    },
    ondragover(e) {
      e.preventDefault();
      console.log(e, "aaaaaa ondragover......");
    },
    ondrop(e) {
      console.log(e, "aaaaaa ondrop......");
    },
    onStart(e) {
      console.log(e, "aaaaaa onStart......");
    },
    onEnd(e) {
      console.log(e, "aaaaaa onEnd......", this.myArray2);
      // const { offsetX, offsetY } = e.originalEvent
      // const index = this.myArray2.length - 1
      // this.myArray2.splice(index, 1, {...this.myArray2[index], x: offsetX, y: offsetY })
      // console.log(offsetX, offsetY, 'aaaaaa onEnd......', this.myArray2)
    },
  },
};
</script>
<style lang="scss">
.drag-container {
  height: 100vh;
  width: 100%;
  display: flex;
  .mh {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .mh1 {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .mh2 {
    height: 100%;
    width: 100%;
    position: relative;
    .mh2-item {
      padding: 20px;
      background-color: aqua;
      margin: 10px;
    }
  }
  .drag-side {
    width: 30%;
    height: 100%;
  }
  .drag-main {
    width: 70%;
    height: 100%;
  }
}
.my-class {
  position: absolute;
}
</style>
